<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" type="text/css" th:href="@{layui/css/layui.css}">-->
    <link rel="stylesheet" type="text/css" th:href="@{layui/css/layui.css}">
<!--    <style>-->
<!--        /* https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-blackboard/images/bg.jpg?v20200831 */-->
<!--        body{-->
<!--            background:url("images/bg.jpg") repeat;-->
<!--        }-->
<!--        #csa{-->
<!--            background-color: rgb(47,64,86);-->
<!--            margin-top: 200px;-->
<!--            width: 500px;-->
<!--            height: 300px;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md4">
        <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
    <div  class="layui-col-md4">

    </div>
    <div  class="layui-col-md4">
        <div id="csa">
            <form class="layui-form" action="" style="padding-top: 60px">
                <div class="layui-form-item">
                    <label class="layui-form-label">输入框</label>
                    <div class="layui-input-block" style="width: 60%">
                        <input type="text" name="account" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码框</label>
                    <div class="layui-input-block" style="width: 60%">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-word-aux">
                        <a href="javascript:getVerifiCode()">
                            <img id="yzm_img" style="cursor:pointer;width: 100px;height: 36px;border-radius: 3px;" title="点击刷新验证码" src="getVerifiCode"/>
                        </a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--<script type="text/javascript" th:src="@{layui/layui.all.js}"></script>-->
<script type="text/javascript" th:src="@{layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{js/jquery-3.2.1.min.js}"></script>
<script>
    function getVerifiCode() {
        $("#yzm_img").prop('src','getVerifiCode?a='+new Date().getTime());
    }
    //Demo
    layui.use(['form','upload'], function(){
        var url = "/user/userLogin"
        var form = layui.form;
        var $ = layui.jquery;

        $('#download').click(function () {
            var downloadUrl = '/download'
            window.location = downloadUrl;
        })

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.load(2);
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.code == 200) {
                    top.layer.msg(data.msg, {icon: 1});
                    window.location = "/index"
                    // 关闭当前iframe弹出层
                    // parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else {
                    top.layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>